<template>
  <el-container>
    <el-header>
      <h1 style="text-align: center;">曲靖818活动后台</h1>
    </el-header>
    <el-main>
      <div style="padding: 10px 0;">
        <el-button type="success" size="mini" @click="initAccounts">活动开始</el-button>
        <el-button type="info" size="mini" @click="dialogVisible = true">账户加金</el-button>
        <el-button type="danger" size="mini" @click="closeActivity">活动结束</el-button>
      </div>
      <div>
        最新价:
        <el-input type="number" placeholder="最新价" v-model="lastedPrice" style="width: 30%;">
        </el-input>
        保证金率:
        <el-input type="number" placeholder="保证金率" v-model="rate" style="width: 30%;">
        </el-input>
        <el-button type="primary" @click="update()">提交修改</el-button>
        <el-dialog title="账户加金" :visible.sync="dialogVisible">
          <el-form>
            <el-form-item label="追加金额">
              <el-radio v-model="radio" label="30000">30000</el-radio>
              <el-radio v-model="radio" label="50000">50000</el-radio>
              <el-radio v-model="radio" label="100000">100000</el-radio>
            </el-form-item>
            <el-form-item label="加金账户选择">
              <el-transfer
                v-model="accSelected"
                :titles="['待选账号', '已选账号']"
                :data="transferUserList"
                :props="{
                  key: 'userName',
                  label: 'userName'
                }"
              >
              </el-transfer>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addExtMoney">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <div style="padding: 30px 0;">
        <h3>市场消息：</h3>
        <el-input type="textarea" v-model="msg"></el-input>
        <el-button @click="publish">发布市场信息</el-button>
      </div>
      <div>
        <h4>账户信息</h4>
        <el-table :data="userList">
          <el-table-column label="账户名">
            <template slot-scope="scope">
              {{scope.row.user.userName}}
            </template>
          </el-table-column>
          <el-table-column label="账号密码">
            <template slot-scope="scope">
              {{scope.row.user.pwd}}
            </template>
          </el-table-column>
          <el-table-column label="初始权益">
            <template slot-scope="scope">
              {{1000000}}
            </template>
          </el-table-column>
          <el-table-column label="账户加金">
            <template slot-scope="scope">
              {{scope.row.user.extMoney}}
            </template>
          </el-table-column>
          <el-table-column label="可用资金">
            <template slot-scope="scope">
              {{scope.row.user.money}}
            </template>
          </el-table-column>
          <el-table-column label="占用保证金">
            <template slot-scope="scope">
              {{scope.row.user.sureMoney}}
            </template>
          </el-table-column>
          <el-table-column label="持仓价值">
            <template slot-scope="scope">
              {{scope.row.user.positionPrice}}
            </template>
          </el-table-column>
          <el-table-column label="账户权益">
            <template slot-scope="scope">
              {{scope.row.user.floatInter}}
            </template>
          </el-table-column>
          <el-table-column label="交易单位">
            <template slot-scope="scope">
              <span>吨</span>
            </template>
          </el-table-column>
          <el-table-column label="持仓手数">
            <template slot-scope="scope">
              <span v-if="scope.row.position">
                {{scope.row.position.number}}
              </span>
              <span v-else>
                0
              </span>
            </template>
          </el-table-column>
          <el-table-column label="持仓方向">
            <template slot-scope="scope">
              <span v-if="scope.row.position">
                {{scope.row.position.direction?'多头':'空头'}}
              </span>
              <span v-else>
                -
              </span>
            </template>
          </el-table-column>
          <el-table-column label="开仓价格">
            <template slot-scope="scope">
              <span v-if="scope.row.position">
                {{scope.row.position.price}}
              </span>
              <span v-else>
                0
              </span>
            </template>
          </el-table-column>
          <el-table-column label="盈亏">
            <template slot-scope="scope">
              {{ scope.row.user.allBenifit }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { requestURL } from '@/config'
import axios from 'axios'

export default {
  name: 'App',
  data () {
    return {
      msg: '',
      lastedPrice: '',
      rate: '',
      dialogVisible: false,
      radio: '',
      userList: [],
      transferUserList: [],
      accSelected: [],
      renderFunc (h, option) {
        return <span>{ option.user.userName }</span>
      }
    }
  },
  mounted () {
    this.getUserInfo()
    this.$nextTick(() => {
      const html = document.querySelector('html')
      html.style.fontSize = '16px'
    })
  },
  methods: {
    initAccounts () {
      const _this = this
      axios.get(`${requestURL}/user/init`).then(() => {
        _this.$message.success('活动初始化完成')
        _this.getUserInfo()
      }).catch(() => {
        _this.$message.error('活动初始化失败')
      })
    },
    closeActivity () {
      const _this = this
      axios.get(`${requestURL}/price/stop`).then(() => {
        _this.$message.success('活动正式结束')
        _this.getUserInfo()
      }).catch(() => {
        _this.$message.error('活动未正常结束')
      })
    },
    publish () {
      const _this = this
      const fd = new FormData()
      fd.append('msg', _this.msg)
      axios.post(`${requestURL}/news/add`, fd).then(() => {
        _this.$message.success('新闻发布成功')
      }).catch(() => {
        _this.$message.error('新闻发布失败')
      })
    },
    addExtMoney () {
      const _this = this
      const userStr = _this.accSelected.join(',')
      const fd = new FormData()
      fd.append('userName', userStr)
      fd.append('extMoney', _this.radio)
      axios.post(`${requestURL}/user/edit`, fd).then(() => {
        _this.$message.success('账户加金成功')
        _this.dialogVisible = false
        _this.getUserInfo()
      }).catch(() => {
        _this.$message.error('账户加金失败')
      })
    },
    getUserInfo () {
      const _this = this
      axios.get(`${requestURL}/user/list`, {params: {flag: false}}).then(response => {
        _this.userList = response.data
        _this.transferUserList = []
        _this.userList.forEach(element => {
          _this.transferUserList.push(element.user)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    update () {
      const _this = this
      axios.post(`${requestURL}/price/add?price=${_this.lastedPrice}&surePrice=${_this.rate}`).then(response => {
        _this.$message.success('价格已更新')
        _this.getUserInfo()
      }).catch(() => {
        _this.$message.error('价格更新失败')
      })
    }
  }
}
</script>

<style>
</style>
